<template>
    <div class="drag-box" v-dragHeight ref="drag">
        <div class="drag-header" v-dragHeight> yuncoding控制台</div>
        <div class="drag-body" id="terminal"></div>
    </div>
</template>

<script>
import {isMobile} from '@/utils/fetch.js'
export default {
    data () {
        return {}
    },
    methods: {
        /**
         * @param result Object complie result
         */
        openTerminal (result) {
            var terminal = this.terminal;

            if(terminal){
                console.log('终端已存在')
                terminal.pause(false)
                terminal.destroy();
            }
            
            var terminal = $("#terminal").terminal(function(comment){
                socket.send(JSON.stringify({
                    'input': comment  
                }))
                terminal.pause(true)
            }, {
                prompt: '>',
                greetings: ''
            });
            this.terminal = terminal;
            // 输出编译结果
            // console.log(result)
            if(result.data){
                terminal.error(result.data);
                return
            }

            let socketURL = 'ws://yuncoding.cn:8080/ws/code/'+result.path+'/';
            var socket = new WebSocket(socketURL);  

            socket.onclose = function(e) {
                console.log('Chat socket closed unexpectedly');
            };
            socket.onmessage = function(e) {
                console.log("收到服务端发来的消息");
                var data = JSON.parse(e.data);
                console.log(data);
                terminal.pause(false);
                terminal.echo(data.message);
                if(data.isEnd === 'true'){
                    terminal.echo("程序已结束");
                    terminal.pause(true);
                }
                console.log("服务端发来的消息已处理");
            };
            console.log(socketURL);          
        }
    },
    directives: {
        dragHeight: {
            bind: function(el, binding, vnode, oldVnode) {
                let changeDom = el.querySelector('.drag-body')
                if(isMobile()){
                    console.log("手机模式")
                    let oriH;
                    let disY;
                    el.addEventListener('touchstart', (e)=>{
                        disY = e.changedTouches[0].screenY;
                        oriH = $(changeDom).height();
                    }, { passive: false })

                    el.addEventListener('touchmove', (e) => {
                        if(changeDom){
                            let h = disY - e.changedTouches[0].screenY;
                            if(h >= 300) h = 300;
                            // console.log(changeDom)
                            changeDom.style.height = oriH ? oriH + h + 'px' : h + 'px'
                        }
                    }, { passive: false })
                }else{
                    let oriH;
                    let disY;
                    el.onmousedown = (e) => {
                        disY = disY || e.clientY;
                        oriH = oriH || $(changeDom).height();
                        console.log(e)
                        document.onmousemove = function(e){
                            e.preventDefault()
                            if(changeDom) {
                                let h = disY - e.clientY;
                                if(h >= 300) h = 300;
                                changeDom.style.height =  oriH ? oriH +  h + 'px' : h + 'px';
                            }
                        }
                        document.onmouseup = function(e){
                            document.onmousemove = null
                            document.onmouseup = null
                        }
                    }
                }
            }
        }
    }
}
</script>

<style lang="stylus">
    .drag-box{
        position absolute;
        width 100%;
        bottom 0
        z-index 9
        background-color #ffffff
        .drag-header{
            font-size 18px
            height 50px
            line-height 50px
            padding-left 20px
            border-top 1px solid #eee
            cursor move
        }
        .drag-body{
            background-color #e4e4e4
        }
    }
</style>

